import React, { Component } from "react";

class App extends Component {
  state = {
    textValue: "",
    areaValue: "",
    selectValue: "",
    radioValue: "",
  };

  fn1 = (e) => {
    this.setState({
      textValue: e.target.value,
    });
  };
  fn2 = (e) => {
    this.setState({
      areaValue: e.target.value,
    });
  };
  fn3 = (e) => {
    this.setState({
      selectValue: e.target.value,
    });
  };

  fn4 = (e) => {
    this.setState({
      radioValue: e.target.value,
    });
    // console.log(e.target.value);
  };

  handleClick = () => {
    console.log(this.state.textValue);
    console.log(this.state.areaValue);
    console.log(this.state.selectValue);
    console.log(this.state.radioValue);
  };

  render() {
    return (
      <>
        <h2>其他表单控件</h2>
        <h3>普通input框</h3>
        <input type="text" value={this.state.textValue} onChange={this.fn1} />
        <hr />
        <h3>多行文本框</h3>
        <textarea value={this.state.areaValue} onChange={this.fn2}></textarea>
        <hr />
        <h3>下拉框</h3>
        <select value={this.state.selectValue} onChange={this.fn3}>
          <option value="1">男</option>
          <option value="2">女</option>
          <option value="3">未知</option>
        </select>
        <hr />
        <h4>单选框</h4>
        <input type="radio" name="sex" value="1" onChange={this.fn4} />男
        <input type="radio" name="sex" value="2" onChange={this.fn4} />女
        <hr />
        <button onClick={this.handleClick}>btn</button>
      </>
    );
  }
}

export default App;
